<template>
    <div>
        <el-col :span="24" >
            <el-form :inline="true">
                <el-form-item label="标题">
                    <el-input style="width: 200px;" v-model="formData.id"  clearable />
                </el-form-item>

                <el-form-item >
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="complete(2)">删除</el-button>
                </el-form-item>
            </el-form>            
        </el-col>
    
        <el-col :span="24">
                <el-table :data="tableData" style="width: 100%" stripe border class="my-table" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40" />
                    <el-table-column prop="id" label="id"  />
                    <el-table-column prop="problemTitle" label="问题名称" />
                    <el-table-column prop="replyPersonName" label="回复人"  />
                    <el-table-column prop="repliedPersonName" label="被回复人"  />
                    <el-table-column prop="replyContent" label="回复内容"  />
                    <el-table-column prop="replyTime" label="回复时间" />
                    
                    <el-table-column prop="operate" label="操作">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="problemsOperate(scope,1)" >编辑</el-button>
                            <el-button type="primary" link @click="problemsOperate(scope,2)" >删除</el-button>
                            <el-button type="primary" link @click="problemsOperate(scope,3)" >回复</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-row>
                <el-pagination
                    :page-sizes="[5, 10, 30, 40]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    :default-page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="pageNumChange"
                />
            </el-row>    
      
          <!-- 这个是修改用的弹窗 -->
                <el-dialog v-model="dialogVisible" title="修改信息" width="500" stripe border class="my-table">
                    <el-form :model="reply">
                        <el-form-item label="id" :label-width="formLabelWidth" >
                            <el-input v-model="reply.id" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="题目" :label-width="formLabelWidth">
                            <el-input v-model="reply.problemTitle" autocomplete="off"/>
                        </el-form-item>        
                        <el-form-item label="回复人" :label-width="formLabelWidth">
                            <el-input v-model="reply.replyPersonName" autocomplete="off"/>
                        </el-form-item>   
                        <el-form-item label="被回复人" :label-width="formLabelWidth">
                            <el-input v-model="reply.repliedPersonName" autocomplete="off"/>
                        </el-form-item>

                        <el-form-item label="回复内容" :label-width="formLabelWidth">
                            <el-input
                                v-model="reply.replyContent"
                                style="width: 340px"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                type="textarea"
                                placeholder="Please input"
                            />
                        </el-form-item>    
                        <el-form-item label="回复时间 " :label-width="formLabelWidth" >  
                            <el-input v-model="reply.replyTime" autocomplete="off"/>
                        </el-form-item>
                        <el-form-item label="del" :label-width="formLabelWidth">  
                            <el-input v-model="reply.del" autocomplete="off"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="updateIsFalse">Cancel</el-button>
                        <el-button type="primary" @click="getAllPage">
                        Confirm
                        </el-button>
                    </div>
                    </template>
                </el-dialog>
   
        <!-- 这个是修改用的弹窗 -->
        <el-dialog v-model="replyVisible" title="回复信息" width="500">
                    <el-form :model="reply">
                        <el-form-item label="题目" :label-width="formLabelWidth" >
                            <el-input v-model="reply.problemTitle" autocomplete="off" disabled/>
                        </el-form-item>        
                        <el-form-item label="回复人" :label-width="formLabelWidth">
                            <el-input v-model="reply.replyPersonName" autocomplete="off" disabled/>
                        </el-form-item>   
                        <el-form-item label="被回复人" :label-width="formLabelWidth">
                            <el-input v-model="reply.replyPersonName" autocomplete="off" disabled/>
                        </el-form-item>
                        <el-form-item label="回复内容" :label-width="formLabelWidth">
                            <el-input
                                v-model="reply.replyContent"
                                style="width: 340px"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                type="textarea"
                                placeholder="Please input"
                            />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="updateIsFalse">Cancel</el-button>
                        <el-button type="primary" @click="insertData">
                        Confirm
                        </el-button>
                    </div>
                    </template>
                </el-dialog>
   
    </div>
</template>
    
<script setup>
   import { ElMessage } from 'element-plus';
    import { ref,getCurrentInstance, onMounted, watch, watchEffect } from 'vue';
    const current = getCurrentInstance();
    const {$http} = current.appContext.config.globalProperties;

    const dialogVisible = ref(false)
    const formLabelWidth = '140px'
    // 用于存放查询得的问题数据
     const tableData = ref([])
     // 用于存放通过id查询得回复数据

    //   用于存放问题的类型
     const  replyVisible = ref(false)
     const updateCategories = ref()

    const reply = ref({
        id:'',
        replyQuestionId:'',
        problemTitle:'',
        replyPersonId:'',
        replyPersonName:'',
        repliedPersonId:'',
        repliedPersonName:'',
        replyContent:'',
        problemReleaseTime:'',
        del:'',
})
    

    const formData = ref({
        id: '',
        pageNum: 1,
        pageSize: 5,
        replyQuestionId:'',
        replyPersonId:'',
    })

    function getAllShop(){
        $http({
            url: 'http://localhost:8081/sfzy/reply',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data;
            console.log(res.data);
        
        })
        
    }
    const total = ref(0)
    function getAllPage(){
        $http({
            url: 'http://localhost:8081/sfzy/reply/page',
            method: 'get',
            params: formData.value
        }).then(res=>{
            tableData.value = res.data.data.list;
            console.log(res.data.data.list);
            total.value = res.data.data.total;
        })
        
    }
     //获取点击的分页页码并执行搜索功能
    function pageNumChange(num){
    formData.value.pageNum=num;
    getAllPage()
    }
    function handleSizeChange(size){
    formData.value.pageSize=size;
    getAllPage()
    }

    function handleSearch(){
        $http({
            url: 'http://localhost:8081/sfzy/reply',
            method: 'get',
            params: formData.value.id
        }).then(res=>{
            tableData.value = res.data.data;  
        })
    }
    function updateData(){
        $http({
                url: 'http://localhost:8081/sfzy/reply',
                method: 'put',
                data: {
                    id:reply.value.id,
                    replyQuestionId:reply.value.replyQuestionId,
                    replyPersonId:"",//用于存放登陆后登陆者的信息
                    repliedPersonId:reply.value.replyPersonId,
                    replyContent:reply.value.replyContent,
                    replyTime:reply.value.replyTime,
                    del:reply.value.del
                }
            }).then(res=>{
                
                ElMessage.success('修改成功');
                getAllPage();
            })
           
    dialogVisible.value = false;
    updateIsFalse();
    updateCategories.value = ''
    }

 
    function problemsOperate(i,k){
        
        
        if(k ==1){ 
           
            dialogVisible.value = true; 
            reply.value = {
                    id:i.row.id,
                    replyQuestionId:i.row.replyQuestionId,
                    problemTitle:i.row.problemTitle,
                    replyPersonId:i.row.replyPersonId,
                    replyPersonName:i.row.replyPersonName,
                    repliedPersonId:i.row.repliedPersonId,
                    repliedPersonName:i.row.repliedPersonName,
                    replyContent:i.row.replyContent,
                    replyTime:i.row.replyTime,
                    del:i.row.del
            }  
        }else if(k==2){
            console.log("这是删除操作");
            $http({
                url: 'http://localhost:8081/sfzy/reply',
                method: 'put',
                data: {
                    id:i.row.id,  
                }
            }).then(res=>{
                ElMessage.success('删除成功');
                getAllPage();
            })
        } else if(k==3){
            console.log("这是回复操作");
            console.log(i)
            replyVisible.value = true; 
            reply.value = {
                    id:i.row.id,
                    replyQuestionId:i.row.replyQuestionId,
                    problemTitle:i.row.problemTitle,
                    replyPersonId:i.row.replyPersonId,
                    replyPersonName:i.row.replyPersonName,
                    repliedPersonId:i.row.repliedPersonId,
                    repliedPersonName:i.row.repliedPersonName,
                    replyTime:i.row.replyTime,
                    del:i.row.del
                    
            }
        }
      
    }
    function insertData(){
        $http({
            url: 'http://localhost:8081/sfzy/reply',
            method: 'post',
            data:reply.value
         }).then(res=>{
            ElMessage.success('回复成功');
            updateIsFalse();
            replyVisible.value = false;
            getAllPage();
        })
    }
    ids = ref([])
        function handleSelectionChange(val){
           ids=val.map(function(item){return item.id})

        }
    
    function complete(e){

        if (e==2) {
            //批量删除
            $http({
            url: 'http://localhost:8081/sfzy/consultationAppointment?ids='+ids.value,
            method: 'delete',
        }).then(res=>{
            ElMessage.success('删除成功');
            console.log(tableData.value);
            total.value = res.data.data.total;
        })
       

        }
    }
    function updateIsFalse() {
   
        dialogVisible.value = false;
        reply.value = {
            id:'',
            replyQuestionId:'',
            problemTitle:'',
            replyPersonId:'',
            replyPersonName:'',
            repliedPersonId:'',
            repliedPersonName:'',
            replyContent:'',
            replyTime:'',
            del:'',
        }
       
    }
    
    onMounted(()=>{
        getAllPage()
    
    })
</script>
    
<style scoped>
     .my-table :deep(th){background-color: #1890ff;color: #ffffff;text-align: center;}
</style>